<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <SearchList>
      <template #actions>
        <a-button size="small" type="primary" @click="editRef.edit(null)">创建角色</a-button>
      </template>
    </SearchList>
    <BoliTabel ref="tableRef" :columns="columns" api="/admin/role/list">
      <template #status="{ text }">
        <span :class="text === 0 ? 'status-active' : 'status-disabled'">
          {{ text === 0 ? '启用' : '禁用' }}
        </span>
      </template>
      <template #action="{ record }">
        <div class="action-buttons">
          <a-button v-permissions="['system:role:assign']" type="link" size="small" @click="permissionRef.open(record.id)">
            <TeamOutlined />
            分配权限
          </a-button>
          <a-button v-permissions="['system:role:edit']" type="link" size="small" @click="editRef.edit(record)">
            <EditOutlined />
            编辑
          </a-button>
          <a-button type="link" size="small" danger @click="handleDelete(record)">
            <DeleteOutlined />
            删除
          </a-button>
        </div>
      </template>
    </BoliTabel>
    <EditRole ref="editRef" @change="tableRef.refresh()" />
    <AssignPermissions ref="permissionRef" />
  </div>
</template>

<script setup>
import BoliTabel from '@/components/BoliTable/index.vue'
import { TeamOutlined } from '@ant-design/icons-vue'
import AssignPermissions from './AssignPermissions.vue'
import { columns } from './data'
import EditRole from './EditRole.vue'

defineOptions({
  name: 'SystemRole',
})

const editRef = ref(null)
const permissionRef = ref(null)
const tableRef = ref() //
// 删除用户
function handleDelete(record) {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除角色 "${record.roleName}" 吗？`,
    okText: '确定',
    cancelText: '取消',
    okType: 'danger',
    onOk: async () => {
      try {
        await httpRequest(`/admin/role/delete`, { id: record.id })
        message.success('删除成功')
        tableRef.value?.refresh()
      }
      catch (error) {
        message.error('删除失败')
      }
    },
  })
}
</script>

<style lang="less" scoped></style>
